<template>
  <div class="column" v-cloak>
    <div class="header-text">
      <span>您当前的位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '#' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">活动管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contanter">
      <div class="table-title">
        <span>栏目设置</span>
      </div>
      <div class="heaer-button">
        <el-button type="primary" size="small" @click="addOne">新增栏目</el-button>
        <el-dropdown>
          <el-button type="primary" size="small">
            批量操作
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="pilian-option">
            <el-dropdown-item>
              <router-link to="/column">新增</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/column">删除</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/column">模板设置</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/column">SEO设置</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/column">其他设置</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/column">分站设置</router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 表格视图 -->
      <div class="container-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select-all="selectAll"
        >
          <el-table-column type="selection" align="center" @click="clickOne"></el-table-column>
          <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
          <el-table-column prop="colName" label="栏目名称" align="left"></el-table-column>
          <el-table-column prop="name" label="别名" width="150" align="left">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                @blur="restOne({ row : scope.row ,index:scope.$index})"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="Moudel" label="所属模型" width="80" align="center"></el-table-column>
          <el-table-column label="导航栏" width="80" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.nav == 'true'">显示</span>
              <span v-else>不显示</span>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="60" align="center"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <div class="make-date">
                <el-button
                  type="primary"
                  size="mini"
                  :disabled="scope.row.content[0].id == ''"
                  @click="goContent(scope.row)"
                >内容</el-button>
                <el-button type="primary" size="mini" @click="compile(scope.row)">编辑</el-button>
                <el-button type="primary" size="mini" @click="delOneRow(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectionArry: [], //选中的数据
      tableData: [], //图表数组
    };
  },
  created() {
    console.log(this.$store.state.Column.column.length);
    if (this.$store.state.Column.column.length > 0) {
      this.tableData = this.$store.state.Column.column;
    } else {
      this.$http({
        path: "/date/colum/date.json",
        method: "get",
      })
        .then((rel) => {
          this.tableData = rel;
          console.log(this.$store.state.Column.column);
          console.log(rel);
        })
        .catch((err) => {});
    }
  },
  methods: {
    // 编辑一行数据
    compile(row) {
      this.$router.push({
        name:'restOneColumn',
        params: {row,id:row.id},
        // query: {id:row.id}
      });
    },
    // 修改一行数据的别名
    restOne(params) {
      let { row, index } = params;
      let params1 = { name: "", id: "", index: "" };
      params1.name = row.name;
      params1.id = row.id;
      params1.index = index;
      this.$store.commit("resetQname", params1);
    },
    selectAll() {
      // console.log("selectAll....");
      // console.log(arguments);
      let selectionArry = arguments[0];
      let arr = selectionArry.filter((item) => {
        console.log(item);

        return item.id;
      });
      console.log(arr);
      console.log(this.selectionArry);
    },
    clickOne() {
      console.log(arguments);
    },
    // 新增一行数据
    goContent(row) {
      this.$store.commit("addColumnOne", row);
    },
    addOne() {
      this.$router.push({
        path: "/column/add",
      });
    },
    content(row) {
      if (row.nav === "不显示") {
        return true;
      }
      return false;
    },
    // 删除一个数据
    delOneRow(row) {
      console.log(row);
      this.$store.commit("delOneCol", row);
    },
  },
  computed: {},
};
</script>

<style socped>
.el-dropdown {
  margin-left: 10px;
}
.pilian-option a {
  font-size: 14px;
  color: black;
  text-decoration: none;
}
.el-table th {
  text-align: center;
}
[v-cloak] {
  display: none;
}
.make-date {
  justify-content: center;
  display: flex;
  width: 100%;
}

.make-date .el-button {
  height: 32px;
  padding: 0 10px;
  margin: 0;
  margin-left: 5px;
}
.make-date .el-button:first-child {
  margin: 0;
}
.make-date .el-button span {
  padding: 0;
}
.container-table {
  min-height: 100%;
  margin: 13px 0;
}
.heaer-button .el-button:hover {
  background-color: #0099cc;
}
.heaer-button .el-button {
  background-color: #28b5d6;
  border-radius: 0;
}
.table-title span {
  display: block;
  line-height: 15px;
  padding-left: 15px;
  margin-left: 2px;
  border-left: 2px solid #88b7e0;
}
.table-title {
  display: flex;
  align-items: center;
  height: 45px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  line-height: 45px;
}
.contanter {
  padding: 15px 27px;
  margin: 30px;
  background-color: #fff;
}
.header-text {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding-left: 25px;
  background-color: #fff;
  text-align: left;
}
.el-breadcrumb {
  line-height: 30px;
  height: 30px;
}
.column {
  background-color: #eaedf1;
  font-size: 14px;
  min-height: 100%;
}
</style>